<template>
  <div class="tabs">
    <el-tag :key="tags.name" v-for="tag in tags" size="small" :closable="tag.name!=='home'" :disable-transitions="false"
      @close="handleClose(tag)" @click="changeMenu(tag)" :effect="$route.path===tag.path? 'dark':'plain'">
      {{tag.label}}
    </el-tag>
  </div>
</template>
<script>
  import { mapState, mapMutations } from 'vuex'
  export default {
    data() {
      return {
        dynamicTags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: ''
      };
    },
    methods: {
      ...mapMutations({
        close: 'closeTab'   //相当于this.$store.......     下面一样
      }),
      handleClose(tag) {
        this.close(tag)
      },
      changeMenu(item) {
        if (this.$route.path !== item.path) {
          this.$router.push(item.path)
          this.$store.commit('selectMenu', item)
        }
      }
    },
    computed: {
      ...mapState({
        tags: state => state.tab.tabsList
      }),
    },
  }
</script>
<style lang="scss" scoped>
  .tabs {
    padding: 20px;
  }

  .el-tag {
    margin-left: 15px;
    cursor: pointer;
  }
</style>